<SCRIPT LANGUAGE="JavaScript">  
    function validation()
    {
        var c = 0;
        var counter=document.getElementById('counter').value;
        var startperiod="";
        var endperiod="";
        var school="";
        var location="";
        var qualification="";
        var major="";
        var grade="";
        
        for( c = 0; c<counter; c+=1)
        {
            startperiod='EducationStartPeriod'+c;
            endperiod='EducationEndPeriod'+c;
            school='EducationSchool'+c;
            location='EducationLocation'+c;
            qualification='EducationQualification'+c;
            major='EducationMajor'+c;
            grade='EducationGrade'+c;
            

            
            if( document.getElementById(startperiod).value.length!=0 || document.getElementById(endperiod).value.length!=0 || document.getElementById(school).value.length!=0 )
            {
                if( document.getElementById(startperiod).value.length!=4 || isNaN( document.getElementById(startperiod).value ) )
                {
                    document.getElementById(startperiod).focus();
                    document.getElementById(startperiod).style.backgroundColor='#FFC';
                    alert("You must enter the right year of the 'start period' ( Ex : 2004 ) ");
                    document.getElementById(startperiod).style.backgroundColor='#FFF';
                    return false;
                }
                if( document.getElementById(endperiod).value.length!=4 || isNaN( document.getElementById(endperiod).value ) )
                {
                    document.getElementById(endperiod).focus();
                    document.getElementById(endperiod).style.backgroundColor='#FFC';
                    alert("You must enter the right year of the 'end period' ( Ex : 2004 ) ");
                    document.getElementById(endperiod).style.backgroundColor='#FFF';
                    return false;
                }
                if( document.getElementById(endperiod).value < document.getElementById(startperiod).value)
                {
                    document.getElementById(startperiod).focus();
                    document.getElementById(endperiod).style.backgroundColor='#FFC';
                    document.getElementById(startperiod).style.backgroundColor='#FFC';
                    alert("Start period must be earlier than End period");
                    document.getElementById(endperiod).style.backgroundColor='#FFF';
                    document.getElementById(startperiod).style.backgroundColor='#FFF';
                    return false;
                }
                if( document.getElementById(school).value.length==0 )
                {
                    document.getElementById(school).focus();
                    document.getElementById(school).style.backgroundColor='#FFC';
                    alert("Please fill your school name");
                    document.getElementById(school).style.backgroundColor='#FFF';
                    return false;
                }
                if( document.getElementById(qualification).value.length==0 )
                {
                    document.getElementById(qualification).focus();
                    document.getElementById(qualification).style.backgroundColor='#FFC';
                    alert("Please fill the qualification");
                    document.getElementById(qualification).style.backgroundColor='#FFF';
                    return false;
                } 

            }
            
        }
        
        
    
    }
    
    function test()
    {
        if( document.getElementById('counter').value >= 5 )
        { 
            alert("Sorry, not allowed more than 5");
            document.getElementById('Add').disabled=true; 
        
        }
        else
        {
            var co=parseInt(document.getElementById('counter').value)+1;
            document.getElementById('counter').value=co;
            if(co==5)
            { document.getElementById('Add').disabled=true; }
            co=co-1;
            
            var temp="<table cellpadding=0 cellspacing=0 class='education'><tr>";
            temp+="<td width='60px'>"+(co+1)+"</td>";
            temp+="<td width='120px'><input type='text' size=4 maxLength='4' id='EducationStartPeriod"+co+"' name='data["+co+"][Education][start_period]'> - ";
            temp+="<input type='text' size=4 maxLength='4' id='EducationEndPeriod"+co+"' name='data["+co+"][Education][end_period]'></td>";
            temp+="<td width='120px'><input type='text' size='15' id='EducationSchool"+co+"' name='data["+co+"][Education][school]'></td>";
            temp+="<td width='180px'><input type='text' size='25' id='EducationLocation"+co+"' name='data["+co+"][Education][location]'></td>";
            temp+="<td width='120px'><input type='text' size='15' id='EducationQualification"+co+"' name='data["+co+"][Education][qualification]'></td>";
            temp+="<td width='120px'><input type='text' size='15' id='EducationMajor"+co+"' name='data["+co+"][Education][major]'></td>";
            temp+="<td width='70px'><input size=5 maxLength=5 type='text' id='EducationGrade"+co+"' name='data["+co+"][Education][grade]'></td>";
            temp+="<td width='70px' style='border-bottom:none'><a href='Javascript:clean("+co+");'>Clear</a></td>";
            temp+="</tr></table>";
            document.getElementById('list').innerHTML+=temp;
        }
    }
    
    function clean(indeks)
    {
        var temp="";
        temp="EducationStartPeriod"+indeks;
        document.getElementById(temp).value="";
        temp="EducationEndPeriod"+indeks;
        document.getElementById(temp).value="";
        temp="EducationSchool"+indeks;
        document.getElementById(temp).value="";
        temp="EducationLocation"+indeks;
        document.getElementById(temp).value="";
        temp="EducationQualification"+indeks;
        document.getElementById(temp).value="";
        temp="EducationMajor"+indeks;
        document.getElementById(temp).value="";
        temp="EducationGrade"+indeks;
        document.getElementById(temp).value="";
        
    }
</SCRIPT>
<?php
echo "<table class='table_resume'><tr>";
    echo "<td valign='top' width='260px'>";
    echo $this->element('menu_resume'); 
    echo "</td>";
    echo "<td class='pemisah'></td>";
    echo "<td valign='top'>";
    echo "<div class='form'>";
    echo "<h2> Education History</h2>";
    echo "<hr color='#2A7EF7'>";
    
        echo $form->create('Education',array('action'=>'index','onsubmit'=>'return validation();'));
    
            $max=3;
            if(count($educations)>$max)
            { $max=count($educations); }
            
            echo "<input type='hidden' value=".$max." id='counter' name='data[counter]'>";
            
            echo "<table cellpadding=0 cellspacing=0 class='education' style='padding-top:10px'>";
            echo "<tr><th width='60px'>Record</th><th width='125px'>Period</th><th width='120px'><font color='red'>School Name</font></th><th width='180px'>Location</th><th width='123px'>Qualification</th><th width='123px'>Major</th><th width='76px'>Grade</th></tr>";
            echo "</table>";
            
            for ($i=0;$i<$max;$i++)
            {
                echo "<table cellpadding=0 cellspacing=0 class='education'><tr>";
                    
                    if(!empty($educations[$i]))
                    {
                        echo "<td width='60px'>".($i+1)."</td>";
                        echo "<td width='120px'><input type='text' size=4 maxLength='4' id='EducationStartPeriod".$i."' name='data[".$i."][Education][start_period]' value='".$educations[$i]['Education']['start_period']."'> - <input type='text' size=4 maxLength='4' id='EducationEndPeriod".$i."' name='data[".$i."][Education][end_period]' value='".$educations[$i]['Education']['end_period']."'></td>";        
                        echo "<td width='120px'><input type='text' size='15' maxLength='40' id='EducationSchool".$i."' name='data[".$i."][Education][school]' value='".$educations[$i]['Education']['school']."'></td>";        
                        echo "<td width='180px'><input type='text' size='25' maxLength='40' id='EducationLocation".$i."' name='data[".$i."][Education][location]' value='".$educations[$i]['Education']['location']."'></td>";        
                        echo "<td width='120px'><input type='text' size='15' maxLength='40' id='EducationQualification".$i."' name='data[".$i."][Education][qualification]' value='".$educations[$i]['Education']['qualification']."'></td>";        
                        echo "<td width='120px'><input type='text' size='15' maxLength='40' id='EducationMajor".$i."' name='data[".$i."][Education][major]' value='".$educations[$i]['Education']['major']."'></td>";        
                        echo "<td width='70px'><input type='text' size=5 maxLength=5 maxLength='40' id='EducationGrade".$i."' name='data[".$i."][Education][grade]' value='".$educations[$i]['Education']['grade']."'></td>";        
                        echo "<td width='70px' style='border-bottom:none'><a href='Javascript:clean(".$i.");'>Clear</a></td>";
                    }
                    else
                    {
                        echo "<td width='60px'>".($i+1)."</td>";
                        echo "<td width='120px'><input type='text' size=4 maxLength='4' id='EducationStartPeriod".$i."' name='data[".$i."][Education][start_period]'> - <input type='text' size=4 maxLength='4' id='EducationEndPeriod".$i."' name='data[".$i."][Education][end_period]'></td>";        
                        echo "<td width='120px'><input type='text' size='15' maxLength='40' id='EducationSchool".$i."' name='data[".$i."][Education][school]'></td>";        
                        echo "<td width='180px'><input type='text' size='25' maxLength='40' id='EducationLocation".$i."' name='data[".$i."][Education][location]'></td>";        
                        echo "<td width='120px'><input type='text' size='15' maxLength='40' id='EducationQualification".$i."' name='data[".$i."][Education][qualification]'></td>";        
                        echo "<td width='120px'><input type='text' size='15' maxLength='40' id='EducationMajor".$i."' name='data[".$i."][Education][major]'></td>";        
                        echo "<td width='70px'><input type='text' size=5 maxLength=5 maxLength='40' id='EducationGrade".$i."' name='data[".$i."][Education][grade]'></td>";        
                        echo "<td width='70px' style='border-bottom:none'><a href='Javascript:clean(".$i.");'>Clear</a></td>";
                    }        
                echo "</tr></table>";        
            }                        
            echo "<span id='list'></span>";
            
            echo "<br>";
            
            echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
            echo "<input type='button' id='Add' value='Add Record' onClick='test();'> &nbsp <input type='submit' value='Save & Next'>";
            

        echo "</form>";
        echo "<br>:. <span class='info'>Please provide your education history information ( Max : 5 ) </span>";
        echo "<br>:. <span class='red'>School Name, Period, Qualification </span> <span class='info'> are required fields</span>";
        echo "<br>:. <span class='info'>If you blank the </span><span class='red'>School Name </span> <span class='info'> field, it will be ignored</span>";

    echo "</div>";
    echo "</td>";
echo "</tr></table>";     
?>